<template>
  <div class="container_img">
    <div class="btn_img">
      <img :src="value || defaultImage" alt />
    </div>

    <el-dialog title="添加素材" :visible.sync="dialogFormVisible" width="750px" center>
          <!--上传图片部分-->
          <el-upload
            style="text-align:center"
            class="avatar-uploader"
            action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
            name="image"
            :show-file-list="false"
            :headers="headers"
            :on-success="handleSuccess"
          >
            <!--预览图片的地址设置-->
            <img v-if="uploadImageUrl" :src="uploadImageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImg">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      // 上传图片的地址
      // uploadImageUrl: null
    }
  },
  methods: {
    fn() {
      // this.$emit('input', this.uploadImageUrl)
    },
    handleSuccess(res) {}
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.btn_img{
  display: block;
  width: 50px;
  height: 50px;
  background: red;
}
</style>
